<template>
  <div
    :class="{ onLogin: goLogin }"
    class="lockscreen"
  >
    <div class="lock" v-if="! goLogin">
      <div class="lock-box">
        <div class="lock" @click="handleGoLogin">
          <span class="lock-icon" title="解锁屏幕">
            <el-icon><el-icon-unlock /></el-icon>
          </span>
        </div>
      </div>
      
      <recharge />

      <div class="local-time">
        <div class="time">{{ date }}</div>
        <div class="date">{{ year }}年{{ month }}月{{ day }}号，星期{{ week }}</div>
      </div>
    </div>

    <div class="login" v-if="goLogin">
      <el-avatar
        class="avatar"
        shape="square"
        :size="120"
        fit="cover"
        :src="$TOOL.data.get('user').user.avatar"
        @error="() => true"
      >
      <el-icon><ma-icon-user style="font-size: 120px; margin-left:-53px" /></el-icon>
      </el-avatar>
      <div class="username"> {{ $TOOL.data.get('user').user.username }} </div>

      <div class="input">
        <el-input
          size="large"
          type="password"
          v-model="unlockPassword"
          placeholder="请输入锁屏密码"
          @keydown.enter="unlock"
        >
          <template #append>
            <el-button @click="unlock">进入</el-button>
          </template>
        </el-input>

        <div style="text-align:center">
          <el-button type="text" size="large" @click="goLogin = false"><span style="color: #fff">关闭</span></el-button>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import recharge from './components/recharge'
export default {
    name: 'lockScreen',
    components: {
      recharge,
    },
    data () {
      return {
        goLogin: false,
        unlockPassword: '',
        date: dayjs().format('HH:mm:ss'),
        resTimeout: null
      }
    },

    computed: {
      year: () => {
        return dayjs().year()
      },
      week: () => {
        return '日一二三四五六'.charAt(dayjs().day())
      },
      day: () => {
        return dayjs().date()
      },
      month: () => {
        return dayjs().month() + 1
      }
    },

    methods: {

      handleGoLogin() {
        this.goLogin = true

        // 5分钟没动静则返回锁屏界面
        this.resTimeout = setTimeout( () => {
          if (this.goLogin) {
            this.goLogin = false
            this.$message.info('长时间无操作，返回锁屏界面')
          }
        }, 3 * 100 * 1000)
      },

      unlock () {
        if (this.unlockPassword === '') {
          this.$message.error('请输入锁屏密码')
          return
        }
        let password = this.$TOOL.crypto.MD5(this.unlockPassword)
        if (this.$TOOL.data.get('lockPassword') && password !== this.$TOOL.data.get('lockPassword')) {
          this.$message.error('锁屏密码错误')
          return
        }
        clearTimeout(this.resTimeout)
        this.$TOOL.data.remove('lockPassword')
        this.$TOOL.data.remove('lockScreen')
        this.$router.push('/dashboard')
      }
    },

    created() {
      setInterval(() => {
        this.date = dayjs().format('HH:mm:ss')
      }, 1000)
    }
}
</script>
<style scoped lang="scss">
.lockscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: #000;
    color: white;
    overflow: hidden;
    z-index: 300;

    &.onLogin {
      background-color: rgba(37, 37, 37, 0.88);
      backdrop-filter: blur(7px);
    }

    .login {
      z-index: 400;
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;

      .avatar {
        margin-top: 25vh;
      }

      .username {
        font-size: 26px; line-height: 30px; margin-top: 15px;
      }
      .input {
        width: 300px; margin-top: 10px;
      }
    }

    .login-box {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      > * {
        margin-bottom: 14px;
      }
    }

    .lock-box {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 56px;
      z-index: 100;

      .tips {
        color: white;
        cursor: text;
      }

      .lock {
        display: flex;
        justify-content: center;

        .lock-icon {
          cursor: pointer;
        }
      }
    }

    .local-time {
      position: absolute;
      bottom: 60px;
      left: 60px;
      font-family: helvetica;

      .time {
        font-size: 70px;
      }

      .date {
        font-size: 40px;
      }
    }
  }
</style>